import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/charts';
import { Pie } from '@ant-design/charts';
import { Card ,Row ,Col} from 'antd';

import './index.css'
export default function InfoVisual() {
    const data = [
        {
            type: '西南科技大学',
            value: 1200,
        },
        {
            type: '清华大学',
            value: 800,
        },
        {
            type: '武汉理工',
            value: 500,
        },
        {
            type: '北京大学',
            value: 1000,
        },
        {
            type: '四川大学',
            value: 2000,
        },
        {
            type: '安徽工业大学',
            value: 200,
        },
        {
            type: '重庆大学',
            value: 900,
        },
        {
            type: '中科大',
            value: 120,
        },
    ];
    const paletteSemanticRed = '#F4664A';
    const brandColor = '#5B8FF9';
    const lowerColor = '#8c8c8c'
    const config = {
        data,
        xField: 'type',
        yField: 'value',
        seriesField: '',
        color: ({ type }) => {
            if (type === '四川大学'||type === '西南科技大学') {
                return paletteSemanticRed;
            }
            if(type === '安徽工业大学'||type === '中科大'){
                return lowerColor;
            }
            return brandColor;
        },
        label: {
            content: (originData) => {
                const val = parseFloat(originData.value);

                if (val < 0.05) {
                    return (val * 100).toFixed(1) + '%';
                }
            },
            offset: 10,
        },
        legend: false,
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
    };

    // const data2 = [
    //     {
    //         type: '分类一',
    //         value: 27,
    //     },
    //     {
    //         type: '分类二',
    //         value: 25,
    //     },
    //     {
    //         type: '分类三',
    //         value: 18,
    //     },
    //     {
    //         type: '分类四',
    //         value: 15,
    //     },
    //     {
    //         type: '分类五',
    //         value: 10,
    //     },
    //     {
    //         type: '其他',
    //         value: 5,
    //     },
    // ];
    const config2 = {
        appendPadding: 10,
        data:data,
        angleField: 'value',
        colorField: 'type',
        radius: 0.9,
        className:'size',
        label: {
            type: 'inner',
            offset: '-30%',
            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            style: {
                fontSize: 14,
                textAlign: 'center',
            },
        },
        interactions: [
            {
                type: 'element-active',
            },
        ],
    };



        return (
            <Card  title="四六级报名信息可视化平台" headStyle={{fontSize: 30}}>
                <Row gutter={24}>
                    <Col span={12}>
                        <Card className="cardSize" title="各大高校报名人数" headStyle={{fontSize: 20}}>
                            <Column {...config}/>
                            <div className="awayLine"></div>
                            <div>
                                <span className="smallData">小于200</span>
                                <span className="middleData">200到1000</span>
                                <span className="bigData"> 大于1500 </span>
                            </div>
                        </Card>
                    </Col>
                    <Col span={12}>
                        <Card className="cardSize" title="各大高校报名比例" headStyle={{fontSize: 20}}>
                            <Pie {...config2} />
                        </Card>
                    </Col>
                    {/*<Col span={12}>*/}
                    {/*    <Card title="六级报名信息" headStyle={{ fontSize: 20 }}>*/}
                    {/*        */}
                    {/*    </Card>*/}
                    {/*</Col>*/}
                </Row>
            </Card>
        )

    ReactDOM.render(InfoVisual, document.getElementById('container'));
}

export { InfoVisual }